<template>
	<view class="item-good-box">
		<image class="item-good-img" lazy-load :webp="true" mode="aspectFill" :src="info.goods_img_url"></image>
		<view class="item-good-cont">
			<text class="item-good-title text-ellipsis-3">{{info.goods_name}}</text>
			<view>
				<view class="progress-title"><text class="progress-title-flex1">当前进度</text><view class="progress-value-box"><text class="progress-value">{{info.join_people}}</text>/{{info.need_people}}</view></view>
				<progress :percent="(info.join_people/info.need_people)*100"  stroke-width="5" activeColor="#E7404A" border-radius="20"/>
			</view>
		</view>
		<image src="/static/wish-success.png" class="item-state-icon" mode="aspectFill" v-if="info.group_state===2"></image>
		<image src="/static/wish-support.png" class="item-state-icon" mode="aspectFill" v-else-if="info.i_had_support===1"></image>
		<image src="/static/wish-cancel.png" class="item-state-icon" mode="aspectFill" v-else-if="info.group_state===4||info.group_state===3"></image>
		<slot name="itemRight" v-else>
			<view class="item-good-supportit" @click.stop="onRightClick" v-if="rightText"><image src="/static/red-btn-bg.png" mode="aspectFill" class="right-bg"></image><text>{{rightText}}</text></view>
		</slot>
	</view>
</template>

<script>
	export default {
		name:'item',
		props:{
			info:Object,
			rightText:String
		},
		data() {
			return {
				
			};
		},
		methods:{
			onRightClick(){
				this.$emit('rightClick')
			}
		}
	}
</script>

<style lang="scss">
	.item-good-box{
		display: flex;
		margin-top: 20rpx;
		padding:30rpx;
		border:1rpx solid #E0E0E0;
		border-radius:10rpx;
		overflow: hidden;
	}
	.item-good-cont{
		flex:1;
		font-size:30rpx;
		color:#333;
	}
	.progress-title{
		margin:13rpx 0 5rpx;
		display: flex;
	}
	.progress-title-flex1{
		flex:1;
		font-size:20rpx;
	}
	.progress-value-box{
		color:#666;
		font-size:20rpx;
	}
	.progress-value{
		color:#E7404A;
	}
	.item-good-title{
		font-weight: bold;
		text-align: justify;
	}
	.item-good-img{
		margin-right:20rpx;
		max-width:140rpx;
		max-height:140rpx;
		border-radius: 4rpx;
	}
	.item-state-icon{
		margin-left:38rpx;
		width:120rpx;
		height:120rpx;
	}
	.item-good-supportit{
		display: flex;
		position: relative;
		// flex-direction: column;
		margin-left:38rpx;
		align-items: center;
		justify-content: center;
		width:120rpx;
		height:120rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		text{
			position: relative;
			z-index: 2;
			width: 70rpx;
			text-align: center;
		}
		.right-bg{
			position: absolute;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
</style>
